<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        总结：
        深度监视：
            (1).Vue中的watch默认不监视对象内部值的改变(一层)
            (2).配置deep:true可以监视对象内部值的改变(多层)
        备注：
            (1).Vue自身可以监视对象内部值的改变,但Vue提供的watch默认不支持!
            (2).使用watch时根据数据的具体结构,决定是否采用深度监视.
     -->

    <div id ="app">
        <!-- 三元表达式： -->
        <!-- <h2>今天天气很{{isHot ? '炎热' : '凉爽'}}</h2> -->

        <!-- 计算属性： -->
        <h2>今天天气很{{getHotState}}</h2>
        <button @click="changeWeather">切换天气</button>
        
        <br>
        <h2>数字：{{numbers.a}}</h2>
        <button @click="numbers.a++;">改变数字a</button>

        
        <br>
        <h2>数字：{{numbers.b}}</h2>
        <button @click="numbers.b++;">改变数字b</button>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        const vm = new Vue({
            el: '#app',
            // 自定义属性
            data: {
                isHot:true,
                numbers: {
                    a:1,
                    b:2
                }
            },
            // 自定义计算属性
            computed: {
                getHotState() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            // 自定义方法
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            },
            // 监视属性(包含普通属性和计算属性)
            watch:{
                isHot:{
                    // 初始化时让handler调用一下
                    immediate:true,
                    // handler函数什么时候调用？    当isHot发生改变时被调用
                    // 函数带两个参数：newValue和oldValue
                    handler(newValue, oldValue) {
                        console.log('isHost被修改了', newValue, oldValue);
                    }
                },

                // 监视多级结构中的某个属性的变化：
                // 'numbers.a': {
                //     handler() {
                //         console.log('a被改变了')
                //     }
                // }

                // 监视多级结构中所有属性的变化：（watch默认不监视多级结构属性变化）
                numbers: {
                    deep:true,
                    handler() {
                        console.log('numbers被改变了');
                    }
                }
            }
        });

        // 监视属性 方法二：
        vm.$watch('isHot', {
            immediate:true,
            handler(newValue, oldValue) {
                console.log("isHot被修改了", newValue, oldValue);
            }
        })
    </script>
</body>
</html>